<template>
	<div class="mask-model" v-if="show" @tap.stop="close">
		<image class="mask-image" src="@/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: -1;"></image>
		<div class="mask-box">
			<div class="mask-info">
				<span class="jiu-font48-fff" style="font-size: 6.4vw;">创建成功</span>
				<span class="jiu-font24-555" style="color: #FFCE80;">请领取你的藏馆门牌号</span>
				<div style="position: relative;">
					<image src="../../../static/img/museumBg.png" mode="aspectFill"
						style="width: 37.33vw;height: 21.33vw;"></image>
					<span
						style="font-size: 2.67vw;font-weight: 600;position: absolute;left: 33.9vw;top: 14.4vw;">NO.{{ num }}</span>
				</div>
				<div class="line-box">
					<div class="dashed"></div>
				</div>
				<div class="btn-box">
					<span class="btn">领取&进入藏馆</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			num: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				show: false,
			}
		},
		methods: {
			open(obj) {
				this.show = true;
			},
			close() {
				this.show = false;
			}
		}

	}
</script>

<style lang="scss">
	@keyframes big{
		0%{
			transform: scale(0.3);
		}
		100%{
			transform: scale(1);
		}
	}
	.line-box {
		padding-top: 4.27vw;
		width: 100%;
		// overflow: hidden;
		position: relative;

		.dashed {
			background: linear-gradient(to left,
					transparent 0%,
					transparent 50%,
					#000 50%,
					#000 100%);
			background-size: 16px 1px;
			background-repeat: repeat-x;
			width: 100%;
			height: 1px;
		}
	}

	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s infinite linear;
	}

	@keyframes box-ani {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.mask-model {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 1111;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.mask-box {
			display: flex;
			align-items: center;
			height: 100%;
			width: 100%;
			padding: 0 8.53vw;

			.mask-info {
				animation: big 1.5s;
				display: flex;
				flex-direction: column;
				padding: 6.4vw 0;
				padding-top: 10.67vw;
				background-color: #1b1b1b;
				width: 100%;
				text-align: center;
				border-radius: 6.4vw;
			}
			.btn-box{
				padding: 6.4vw;
				padding-bottom: 0;
				.btn{
					display: block;
					width: 100%;
					background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
					box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.48);
					border-radius: 6.4vw;
					line-height: 12.8vw;
					border-radius: 6.4vw;
					font-size: 3.73vw;
					font-weight: 500;
					color: #000;
				}
			}
		}
	}
</style>
